<template>
  <div class="live-room" :style="{height: scrollerHeight}">
    <div class="video-box" v-if="status==0">
      <video v-if="playFlag && video" class="video-js" x-webkit-airplay="allow" webkit-playsinline controls preload="auto" autoplay>
          <source :src="video">
      </video>
      <img class="cover" :src="channel.trailerCover">
      <div class="video-num">
        <div class="back" @click="goBack"><img src="../../assets/images/back.png"></div>
        <div class="num">
          <van-icon name="eye-o" />
          <span>{{ setting.currentAudience || 0 }}人观看</span>
        </div>
      </div>
      <div v-if="!playFlag" class="play" @click="toPlay"><img src="../../assets/images/play.png"></div>
    </div>
    <div class="video-box" v-show="status==1">
      <video id="my-video" class="video-js" x-webkit-airplay="allow" webkit-playsinline controls preload="auto" autoplay>
          <source :src="pullUrl" type="application/x-mpegURL">
      </video>
      <div class="video-num">
        <div class="back" @click="goBack"><img src="../../assets/images/back.png"></div>
        <div class="num">
          <van-icon name="eye-o" />
          <span>{{ setting.currentAudience || 0 }}人观看</span>
        </div>
      </div>
    </div>
    <div class="video-text" v-if="setting.scrollBarSwitch">
      <div class="inner">
        <span>{{setting.scrollSubtitle}}</span>
      </div>
    </div>
    <van-swipe class="live-room__swipe" :autoplay="3000" indicator-color="white" v-if="scrollBarImg.length>0">
      <van-swipe-item v-for="(item, index) in scrollBarImg" :key="index"><img :src="item"></van-swipe-item>
    </van-swipe>
    <van-tabs @click="getTabs" background="transparent" line-width="24" animated>
      <van-tab title="聊天互动">
        <div class="chat-container">
          <div class="top-box" v-if="setting.scrollBarSwitch">
            <van-icon name="volume-o" />
            <div class="top">
              <div class="inner">
                <span>{{setting.scrollSubtitle}}</span>
              </div>
            </div>
          </div>
          <div id="chat-list" @click="chatType=0;">
            <div class="leave-message" v-for="(item, index) in mesList" :key="item.idClient">
              <div class="leave-message__avatar">
                <van-image round width="46px" height="46px" :src="item.fromAvatar" />
              </div>
              <div class="leave-message__content">
                <div class="leave-message__nickname">
                  <span>{{ item.fromNick }}</span>
                  <img v-if="item.position=='manager'" height="17" src="../../assets/images/admin.png" />
                </div>
                <span class="leave-message__message">
                  <!-- <span class="leave-message__top" v-show="top">[置顶]</span> -->
                  <span v-if="item.type=='text'">{{ item.text }}</span>
                  <span v-if="item.type=='image'"><img :src="item.file.url" style="max-width:200px; max-height:200px;"></span>
                </span>
                <span class="leave-message__datetime">{{ item.time | dateFormat }}</span>
                <div class="leave-message__actions" v-if="position=='manager'">
                  <span class="leave-message__action" @click="removeMes(item, index)">删除评论</span>
                  <span v-show="!top" class="leave-message__action leave-message__action--top">置顶</span>
                  <span v-show="top" class="leave-message__action">取消置顶</span>
                </div>
              </div>

            </div>
            <!-- <leave-message v-for="item in mesList" :key="item.idClient" :nickname="item.fromNick" :fromAvatar="item.fromAvatar" :time="item.time" admin top>{{ item.text }}</leave-message> -->
          </div>
        </div>
      </van-tab>
      <van-tab :title="setting.activityTitle" v-if="setting.activitySwitch">
        <div class="top-boxs" v-if="setting.onlineRegistrationTipText">
          <van-icon name="volume-o" />
            <div class="top">
              <div class="inner" >
                <span>{{setting.onlineRegistrationTipText}}</span>
              </div>
            </div>
        </div>
        <div style="height:662px; background-color:#eee;" v-html="setting.activityIntroduction"></div>
      </van-tab>
      <van-tab :title="setting.onlineRegistrationName" v-if="setting.onlineRegistrationSwitch">
        <div class="top-boxs" v-if="setting.onlineRegistrationTipText">
          <van-icon name="volume-o" />
            <div class="top">
              <div class="inner">
                <span>{{setting.onlineRegistrationTipText}}</span>
              </div>
            </div>
        </div>
        <div class="form-box">
          <div class="" v-for="(item,index) in setting.onlineRegistrationContent" :key="index">
            <div class="form-tit">{{item}}<span class="red">*</span></div>
            <div class="form-li">
              <van-field v-model="enrollName" v-if="item === '姓名'" placeholder="请输入联系人姓名"/>
              <van-field v-model="enrollPhone" type="digit" v-if="item === '手机'" placeholder="请输入联系人手机号" maxlength="11" />
              <van-field v-model="enrollWeChat" v-if="item === '微信'" placeholder="请输入联系人微信号"/>
              <van-field v-model="enrollAddress" v-if="item === '地址'" placeholder="请输入联系人地址"/>
              <van-field v-model="enrollRemark" v-if="item === '备注'" placeholder="请输入备注"/>
            </div>
          </div>


          <!-- <div class="form-tit">订购数量<span class="red">*</span></div>
          <div class="form-li">

          </div> -->
          <van-button class="submit" type="danger" @click="toSubmit">{{setting.onlineRegistrationButtonText}}</van-button>
        </div>
      </van-tab>
    </van-tabs>
    
    <chat-emoji
      v-show="isEmojiShown"
      v-on:add-emoji="addEmoji"
      v-on:hide-emoji="hideEmoji"
    ></chat-emoji>

    <div class="chat-action-box" id="chat-action" v-if="tabIndex==0">
          <div class="chat-action-bar">
            <img class="chat-btn" @click="goShopping" src="../../assets/images/shop.png" />
            <img class="chat-btn" src="../../assets/images/notice.png" />
            <div class="chat-input">
              <van-field v-model="message" placeholder="发消息..." @keyup.enter="sendMsg" />
            </div>
            <img class="chat-btn" @click="showEmoji(1)" src="../../assets/images/emoji.png" />
            <img class="chat-btn" v-if="!sendFlag" @click="showEmoji(2)" src="../../assets/images/upload.png" />
            <div class="chat-send" v-if="sendFlag" @click="sendMsg">发送</div>
          </div>
          <div class="chat-lay" v-if="chatType==1">
            <chat-emoji
              v-show="isEmojiShown"
              v-on:add-emoji="addEmoji"
              v-on:hide-emoji="hideEmoji"
            ></chat-emoji>
          </div>
          <div class="chat-lay" v-if="chatType==2">
            <div class="chat-img">
              <img src="../../assets/images/photo.png">
              <input id="file" type="file" style="opacity:0; position:absolute;top:0; left:0;" @change="getImg" />
            </div>
          </div>
    </div>
    <!-- <div v-if="isRedShow || hasAdminRed"> -->
      <UserRed v-if="isRedShow" @onClose="handleRedHide1" :redData='packetData' :dTime='ReddTime' :channelName='channel.title' :redStatus='redStatus' @changeStatus="changeStatus"/>
      <AdminRed v-if="hasAdminRed" @onClose="handleRedHide" :redData='packetData' :channelName='channel.title' :channelId='cid' :redStatus='redStatus' @changeStatus="changeStatus" />
    <!-- </div> -->
    
    <van-action-sheet v-model="shopShow" style="background:#fff" class="live-goods" :lock-scroll='scroll'>
      <div class="live-goods-title"><span class="pl24">{{channel.title}}</span><img class="close-icon" @click="closeSheet" src="../../assets/live/close-icon.png"></div>
      <van-pull-refresh v-model="isLoading" @refresh="onRefresh">
        <van-list v-model="loading" :finished="finished" finished-text="没有更多了" @load="onLoad">
          <van-cell v-for="item in liveGoods" :key="item">
            <div class="live-goods-li rx-ss">
              <img :src="item.mainPhoto">
              <div class="">
                <div class="live-goods-name">{{item.goodsName}}</div>
                <div class="cor-999 ft24 mt10">
                  <span>已售：{{item.salesVolume}}</span><span class="ml20">库存：{{item.goodsStock}}</span>
                </div>
                <div class="parice-pay dis-sp mt10">
                  <div class="live-goods-price" :class="item.goodsTag == 1?'cor-A00':'cor-32D1CB'">{{item.goodsTag==1?'':'定金'}}￥<span>{{item.goodsPrice}}</span></div>
                  <div :class="item.goodsTag == 1?'live-goods-pay':'live-goods-pay1'" @click="goPay(item)"> {{item.goodsTag==1?'立即购买':'预定'}}</div>
                </div>
              </div>
            </div>
          </van-cell>
        </van-list>
      </van-pull-refresh>
    </van-action-sheet>
    <div class="red-box" @click="openRedPacket">
      <img src="../../assets/images/red.png">
    </div>

  </div>

</template>

<script>
import { Swipe, SwipeItem, Tab, Tabs,ActionSheet,Toast } from "vant"
import UserRed from '../../components/live/userred'
import AdminRed from '../../components/live/adminred'
import ChatContainer from "../../components/live/ChatContainer"
import http from "@/utils/request"
import SDK from '@/sdk/NIM_Web_SDK_v6.1.0'
import LeaveMessage from "../../components/live/LeaveMessage"
import ChatEmoji from './ChatEmoji'
import {setMerchantsId,setToken} from "@/utils/auth"
import $api from "@/api/index";

var chatroom = null;
var scrollTimer = null;
let initCount = 1;
let myPlayer = null;
export default ({
  name: "LiveRoom",
  components: {
    UserRed,
    AdminRed,
    ChatContainer,
    LeaveMessage,
    [Swipe.name]: Swipe,
    [SwipeItem.name]: SwipeItem,
    [Tabs.name]: Tabs,
    [Tab.name]: Tab,
    [ActionSheet.name]: ActionSheet,
    ChatEmoji
  },
  // setup() {
  //   const active = ref(0);
  //   return { active };
  // },
  data() {
    return {
      isLoading: false,
      liveGoodsPage:0,
      liveGoods: [],
      loading: false,
      finished: false,
      shopShow:false,
      cid:'',
      isRedShow: false,
      hasAdminRed:false,
      redStatus:3,//0未设置红包 3已抢过  4未抢过，已被抢完   redStatus:1可抢——hasOpenRed:1抢前 2抢中 3抢后
      ReddTime:false,//发红包的头像定位
      name: '',
      num: 1,
      message: '',
      account: 'oeQF_xLFpZL978720OEGh1P4xy6E',
      channel: {},
      setting: {},
      scrollBarImg: [],
      mesList: [],
      userInfo: {},
      openId: '',
      imageUrl: '',
      isEmojiShown: false,
      pullUrl: '',
      playFlag: false,


      enrollName:'',
      enrollphone:'',
      enrollWeChat:'',
      enrollAddress:'',
      enrollRemark:'',
      status: 0,
      video: '',
      scrollerHeight: '100%',

      packetData:{},
      isManager:false,//是否管理员
      isSendRedPacket:false,//是否发过红包
      scrollerHeight: '667px',
      tabIndex: 0,
      chatType: 0,
      sendFlag: false
    }
  },
  created(){
    //https://h5.51ysscw.life/?openId=oeQF_xLFpZL978720OEGh1P4xy6E#/home
    //http://localhost:8088/?openId=oeQF_xLFpZL978720OEGh1P4xy6E#/liveroom?id=1f405bff1c574bbd8f37d1db8ece81f4
    let cid = this.$route.query.id;
    if(cid){
      localStorage.setItem('cid', cid);
      this.cid = cid
    }
    let url = location.href;
    if(url.indexOf('openId')==-1){
      location.href = "https://api.51ysscw.life/interface/api/mobile/public/wxUserInfo/exclude/authorize?id="+cid
    }
    else{
      let openId = this.$route.query.openId;
      if(openId){
        this.openId = openId;
        setToken(openId)
      }
      let str = url.split("#")[0];
      console.log(str)
      // let openId = str.split("openId=")[1]
      // console.log(str.split("openId=")[1])
      // this.openId = openId;
      // localStorage.setItem('TOKEN_KEY', openId);
      // console.log(openId)
      // setToken(openId);
      //获取用户信息
      $api.aboutApi.wxUserInfo({}).then((res)=>{
        this.userInfo = res.data;
        let id = cid;
        localStorage.setItem('cid', cid)
        //直播间信息
        http.request({
            url: "/api/mobile/public/channel/exclude/getChannelInfo",
            method: "get",
            params: {
              channelId: id
            }
        }).then((res)=>{
          this.channel = res.data.channel;
          let status = res.data.channel.status;
          this.status = status;
          this.video = res.data.channel.video;
          this.setting = res.data.marketingSettings;
          this.scrollBarImg = res.data.marketingSettings.scrollBarImg || [];
          let pullUrl = res.data.channel.hlsPullUrl || '';
          this.pullUrl = pullUrl.replace('http:','https:');
          let roomid = res.data.chatroom.roomid;
          setMerchantsId(this.channel.merchantsId);
          http.request({
              url: "/api/mobile/public/chatroom/exclude/requestAddr",
              method: "get",
              params: {
                roomid: roomid
              }
          }).then((res)=>{
            console.log(res)
            this.init(roomid, res.data.addr);
          });
          if(status==1){
            setTimeout(()=>{
              myPlayer = neplayer("my-video", {}, function(res){
                // 当播放器初始化完成时运行的回调函数
                //console.log(res)
                // myPlayer.setDataSource({
                //   type: "application/x-mpegURL",
                //   src: self.pullUrl
                // });
              });
            }, 300)
          }
          //获取直播间商品
          this.loading = false
          this.firstLoad = false
          this.finished = false
          this.liveGoodsPage = 0
          this.getLiveGoods()
        });
      })
    }
  },
  destroyed(){
    chatroom.destroy();
    myPlayer && myPlayer.release();
    myPlayer = null;
  },
  watch: {
    message(val){
      if(val){
        this.sendFlag = true;
      }
      else{
        this.sendFlag = false;
      }
    }
  },
  mounted(){
    let resizeHeight=document.documentElement.clientHeight || document.body.clientHeight;
    console.log(resizeHeight)
    this.scrollerHeight=resizeHeight+"px";
    window.onresize = ()=>{
        return(()=>{
            //键盘弹起与隐藏都会引起窗口的高度发生变化
            let doms = document.getElementById("chat-action");
            doms.style.position = "fixed";
            doms.style.bottom = 0;
            if(resizeHeight-0<originalHeight-0){
            //当软键盘弹起，在此处操作
                document.querySelector('body').setAttribute('style', 'height:'+originalHeight+'px;');
                this.scrollerHeight=resizeHeight;
            }else{
            //当软键盘收起，在此处操作
            document.querySelector('body').setAttribute('style', 'height:100%;');
            this.scrollerHeight="100%";
            }
        })()

    }
    // let botHeight = 0;
    // console.log(screen)
    // if (/iphone/gi.test(navigator.userAgent) && (screen.height > 807)) {
    //   console.log('是iphonex')
    //   botHeight = 34;
    // } else {
    //   console.log('不是iphonex')
    // }
    // console.log(resizeHeight)
    //let chatHeight = resizeHeight - 210 - 23 - 63 - 44 - 90 - botHeight;
    //this.chatHeight = chatHeight + 'px';
  },
  methods:{
    
    toScroll(){
      //setTimeout(() => this.reset(), 100)
    },
    reset() {
      document.body.style.height = window.innerHeight + 'px'
      document.body.scrollTop = 0;
    },
    getTabs(e){
      console.log(e)
      this.tabIndex = e;
    },
    openRedPacket(){//打开红包
    //获取直播间红包
        http.request({
            url: "/api/mobile/public/redPacket/exclude/getChannelRedPacket",
            method: "get",
            params: {
              channelId: this.cid
            }
        }).then((res)=>{
          console.log(res)
          this.packetData = res.data
          this.isManager = res.data.isManager
          this.isSendRedPacket = res.data.isSendRedPacket
          if(this.packetData.id){//有红包
            this.redStatus = 1
          }else{//没有红包
            this.redStatus = 0
          }
          if(this.isManager){//管理员
            this.hasAdminRed = true
          }else{
            if(res.data.id){//有红包
              if(res.data.alsoNumber == 0){//红包已抢完
                if(res.data.redPacketRecordList.length>0){//抢过了
                  this.redStatus = 3
                  this.packetData = res.data.redPacketRecordList[0]
                }else{//未抢 或 抢了没抢到 
                  this.redStatus = 4
                }
              }
              if(res.data.alsoNumber != 0 && res.data.redPacketRecordList.length>0){//红包未抢完  但抢过了
                this.redStatus = 3
                this.packetData = res.data.redPacketRecordList[0]
              }
            }
            this.isRedShow = true
          }
        });
    },
    // 关闭红包弹框
    handleRedHide() {
      this.hasAdminRed = false
    },
    // 关闭红包弹框
    handleRedHide1() {
      this.isRedShow = false
    },
    changeStatus() {
      this.redStatus = 0
    },
    init(roomid, addr){
      // 匿名方式登录
    console.log(123)
      let self = this;
      let accid = this.userInfo.neteaseUserInfo.accid;
      let token = this.userInfo.neteaseUserInfo.token;
      chatroom = SDK.Chatroom.getInstance({
        appKey: 'f8a1497297ff9bcef226adcc3261ea04',
        account: accid,
        token: token,
        chatroomId: roomid,
        chatroomAddresses: addr,
        onconnect: function(obj){
          console.log(obj)
          self.position = obj.member.type;
          // 该处chatroom为全局生成的实例
          //window.account = chatroom.account
           chatroom.getHistoryMsgs({
              msgTypes: ['text', 'image'],
              done: function(error, obj){
                console.log(obj)
                let msgs = obj.msgs;
                let mesList = msgs.reverse();
                self.mesList = mesList;
                self.scrollDown();
                //self.getHistoryMsgsDone(error, obj)
                chatroom.getChatroomMembers({
                  guest: false,
                  limit: 100,
                  done: function(error, obj){
                    console.log(obj.members)
                    let members = obj.members;
                    for(let i in mesList){
                      for(let j in members){
                        if(mesList[i].from==members[j].account){
                          self.$set(self.mesList[i], 'position', members[j].type)
                        }
                      }
                    }
                  }
                });
              }
            })
        },
        onwillreconnect: function(obj){
          console.log('即将重连');
          console.log(obj.retryCount);
          console.log(obj.duration);
        },
        ondisconnect: function(error){
          console.log('丢失连接');
          console.log(error);
          if (error) {
            switch (error.code) {
              // 账号或者密码错误, 请跳转到登录页面并提示错误
              case 302:
                break;
              // 重复登录, 已经在其它端登录了, 请跳转到登录页面并提示错误
              case 417:
                break;
              // 被踢, 请提示错误后跳转到登录页面
              case 'kicked':
                break;
              default:
                break;
            }
          }
        },
        onerror: function(error){
          console.log(error);
        },
        onmsgs: function(res){
          console.log(res)
          for(let i in res){
            if(res[i].type=="text"){
              chatroom.getChatroomMembersInfo({
                accounts: [res[i].from],
                done: function(error, obj){
                  //console.log('获取聊天室成员信息' + (!error?'成功':'失败'), error, obj);
                  res[i].position = obj.members[0].type;
                  self.mesList.push(res[i]);
                  initCount = 1;
                  self.scrollDown();
                }
              });
            }
          }
        }
      });
    },
    sendMsg(){
      let self = this;
      var msg = chatroom.sendText({
        text: this.message,
        done: function(error, msg) {
          msg.position = self.position;
          self.mesList.push(msg);
          self.message = '';
          initCount = 1;
          self.scrollDown();
        }
      });
      this.chatType = 0;
    },
    getImg(e){
      let file = e.target.files[0];
      let self = this;
      chatroom.sendFile({
        type: 'image',
        blob: file,
        uploadprogress: function(obj) {
          console.log('文件总大小: ' + obj.total + 'bytes');
          console.log('已经上传的大小: ' + obj.loaded + 'bytes');
          console.log('上传进度: ' + obj.percentage);
          console.log('上传进度文本: ' + obj.percentageText);
        },
        uploaddone: function(error, file) {
          console.log('上传' + (!error?'成功':'失败'), error, file);
        },
        beforesend: function(msg) {
          console.log('正在发送聊天室image消息, id=' + msg.idClient);
        },
        done: function(error, obj){
          //console.log(obj)
            if(obj.type=="image"){
              self.mesList.push(obj);
              initCount = 1;
              self.scrollDown();
            }
            self.chatType = 0;
        }
      });
    },
    onLoad() {//购物加载更多
      if(!this.firstLoad){
        this.firstLoad = true
        return
      }
      this.liveGoodsPage = this.liveGoodsPage+1
      this.getLiveGoods()
    },
    onRefresh(){
      this.loading = false
      this.firstLoad = false
      this.finished = false
      this.liveGoodsPage = 0
      this.getLiveGoods()
    },
    getLiveGoods(){
      $api.liveApi.liveGoods({page:this.liveGoodsPage,size:50,channelId:this.cid}).then((res)=>{
        if(this.liveGoodsPage == 0){
          this.liveGoods = res.data.content
        }else{
          this.liveGoods = this.liveGoods.concat(res.data.content);
        }
        
        this.loading = false
        this.isLoading = false,
        this.finished = !res.data.hasNextPage
      })
    },
    closeSheet(){
      this.shopShow = false
    },
    goShopping(){//购物
      this.shopShow = true
    },
    goPay(item){//去支付
      if(item.goodsStock <= 0){
        Toast({
            message: '库存不足!',
          });
        return false
      }
      this.$router.push({path:"/confirmOrder",query:{goodsId:item.goodsId,source:'1'}}) 
    },
    showEmoji (type) {
      this.chatType = type;
      if(type==1){
        this.isEmojiShown = true;
      }
    },
    hideEmoji () {
      this.isEmojiShown = false;
      this.chatType = 0;
    },
    addEmoji (emojiName) {
      this.message += emojiName
      this.hideEmoji();
    },
    removeMes(item, index){
      http.request({
          url: "/api/mobile/public/chatroom/chatroomDeleteHistoryMessage",
          method: "post",
          data: {
            roomid: item.chatroomId,
            fromAcc: item.from,
            msgTimetag: item.time
          }
      }).then((res)=>{
        this.mesList.splice(index, 1);
      });
    },
    setAdmin(){
      chatroom.markChatroomManager({
        account: this.account,
        isAdd: true,
        done: function(error, obj) {
          console.log('添加聊天室管理员' + (!error?'成功':'失败'), error, obj.member);
        }
      });
    },
    scrollDown(){
      let dom = document.getElementById('chat-list');
      if (!dom) {
        return
      }
      let maxCount = 5

      let pos = Math.max(dom.scrollHeight - dom.clientHeight, 888888);
      dom.scrollTop = pos;
      if (initCount < maxCount) {
        clearTimeout(scrollTimer)
        scrollTimer = setTimeout(() => {
          initCount++
          this.scrollDown(pos, initCount)
        }, 200)
      }
      else{
        clearTimeout(scrollTimer)
      }
    },
    // 滚动聊天列表到底部
    scrollChatListDown: (pos, initCount) => {
      let dom = document.getElementById('chat-list')
      if (!dom) {
        return
      }
      let maxCount = 5
      initCount = initCount || 1
      if (typeof pos !== 'number') {
        pos = Math.max(dom.scrollHeight - dom.clientHeight, 888888)
      }
      dom.scrollTop = pos
      if ((dom.scrollTop < pos) && (initCount < maxCount)) {
        clearTimeout(scrollTimer)
        scrollTimer = setTimeout(() => {
          initCount++
          page.scrollChatListDown(pos, initCount)
        }, 200)
      }
    },
    handleChange(info) {
      if (info.file.status !== 'uploading') {
        console.log(info.file, info.fileList);
      }
      if (info.file.status === 'done') {
        let res = info.file.response.data;
        this.imageUrl = res.originalUrl;
      }
    },
    toPlay(){
      this.playFlag = true;
    },
    goBack(){
      this.$router.push({ path: '/home'})
    },
    toSubmit(){
        if(this.enrollPhone.length!==11){

          this.$toast("手机格式不正确");
          return
        }
          http.request({
              url: "/api/mobile/public/onlineRegistration",
              method: "post",
              data: {
                cid: localStorage.getItem('cid'),
                content: {
                  name: this.enrollName,
                  phone: this.enrollPhone,
                  weChat: this.enrollWeChat,
                  address: this.enrollAddress,
                  remark: this.enrollRemark
                }
              }
          }).then((res)=>{
            console.log(res)
            this.$toast("提交成功");
            this.enrollName = ''
            this.enrollPhone = ''
            this.enrollWeChat = ''
            this.enrollAddress = ''
            this.enrollRemark = ''
          });
    }
  }

});
</script>

<style lang="scss" scoped>
@import "../../styles/variables";

body{background: $gray-2;}
.live-room {
  background: $gray-2;
  overflow-y: auto;
  overflow-x: hidden;
  height: 100vh;

  &__swipe {
    ::v-deep .van-swipe-item {
      color: #fff;
      font-size: 20px;
      line-height: 150px;
      text-align: center;
      background: #323333;
      height: 138px;
    }
  }

  ::v-deep .van-tab--active {
    font-weight: bold;
  }
  .video-box{
    height:420px; background-color:#666; position: relative; overflow:hidden;
    .video-js{ width:100%; height:420px;}
    .cover{ max-width:auto; height: 100%; display: block;margin: 0 auto;}
    .video-num{
      display: flex; justify-content: space-between; align-items: center; position:absolute; top:24px; left:0; z-index:100; height:60px; width:100%;
      .back{
        display: flex; justify-content: center; align-items: center; margin-left:24px;
        img{ width:60px; height:60px;}
      }
      .num{
        display: flex; justify-content: center; align-items: center; width:184px; height:52px; background-color:rgba(0, 0, 0, 0.4); border-radius:30px; font-size:20px; color:#fff; margin-right:24px;
        span{ margin-left:8px;}
      }
    }
    .play{
      width: 116px; height:116px; position:absolute; top:152px; left:318px; z-index:100;
      img{ width:100%; height:100%;}
    }
  }
  .video-text{
    height:46px; line-height:46px; background-color:#323333; color:#fff; font-size:24px;
  }
}
  .inner {
    margin-left: 100%;
    width: 200%;
    animation: myMove 20s linear infinite;
    animation-fill-mode: forwards;
    span{ margin-right:350px;}
  }
.top-boxs{
  display: flex; justify-content: flex-start; align-items: center; height:48px; margin:24px 24px 36px; background-color:#fff; border-radius:24px; white-space:nowrap; overflow:hidden; padding:0 24px; font-size:24px; color:#999;
  .top{ margin-left:20px; overflow:hidden;}
    /*文字无缝滚动*/
  @keyframes myMove {
    0% {
      transform: translateX(0);
    }
    100% {
      transform: translateX(-1000px);
    }
  }
}
.form-box{
  padding:24px;
  .form-tit{
    font-size:28px; line-height:40px; margin-bottom:16px; color:#2E2F33;
    .red{ color:#DB1919; line-height: 20px;}
  }
  .form-li{
    padding: 0 24rpx; background-color:#DB1919; height:96rpx; border-radius:48px; font-size:28px; display:flex; align-items:center; overflow:hidden; margin-bottom:30px;
  }
  .submit{ height:96px; width:100%; border-radius:48px;}
}
.chat-container {
  padding: 10px 24px 0;

  &__notice {
    border-radius: $border-radius-max;
    height: 24px;
    padding: 0 $padding-xs;
    margin-bottom: 10px;

    ::v-deep .van-notice-bar__left-icon {
      color: $gray-8;
    }
  }
  .top-box{
    display: flex; justify-content: flex-start; align-items: center; height:48px; margin:24px 0 36px; background-color:#fff; border-radius:24px; white-space:nowrap; overflow:hidden; padding:0 24px; font-size:24px; color:#999;
    .top{ margin-left:20px; overflow:hidden;}
  }
}
#chat-list{ height: 42vh; overflow-y:auto;}
.chat-action-box{
  width: 100%; background-color: $gray-2; position: fixed; bottom: 0; left: 0; z-index: 900;
  .chat-lay{
    padding: 48px 24px;
    border-top: 2px solid #EBEBEB;
    .chat-img{
      width: 120px; height: 120px; position: relative; overflow: hidden;
      img{ width: 100%; height: 100%; }
    }
  }
}
.chat-action-bar {
  display: flex; justify-content: space-between; align-items: center; padding: 20px 24px;
  .chat-btn{
    display:flex; justify-content:center; align-items:center; width:72px; height:72px;overflow:hidden; position:relative;
  }
  .chat-send{display:flex; justify-content:center; align-items:center; width:72px; height:72px; background-color: #fff; border-radius: 50%; font-size: 20px; overflow:hidden;}
  .chat-btn-ml{ margin-left:24px;}
  .chat-input{
    display:flex; justify-content:center; align-items:center; width: 318px; height:72px; background-color:#fff; border-radius:36px; overflow:hidden;
    .van-cell{ padding:0 16px;}
  }
}

.leave-message__content{ width: 550px;}
.leave-message {
  margin-bottom: 36px;
  display: flex;

  &__content {
    margin-top: 10px;
    margin-left: 10px;
    text-align: left;
  }

  &__tag-admin {
    margin-left: 4px;
  }

  &__nickname {
    display: flex;
    align-items: center;
    color: #161f1c; margin-bottom:16px;
  }

  &__top {
    color: #cf4c5b;
    margin-right: 8px;
  }

  &__message {
    margin-top: 10px;
    display: inline-block;
    border-radius: 4px; font-size: 28px;
    color: #333333;
    max-width: 80%;word-wrap: break-word;
    background-color: #fff;
    border:26px solid #CF4C5B;
    border-image-source:url(../../assets/images/mes-bg.png);
    border-image-slice:26 26 26 26;
    border-image-width:26px 26px 26px 26px;
    border-image-outset:0 0 0 0;
    border-image-repeat:repeat;
  }

  &__datetime {
    margin-top: 10px;
    display: block;
    color: $gray-6;
    font-size: $font-size-sm;
  }

  &__actions {
    margin-top: 10px;
    display: block;
  }

  &__action {
    font-size: $font-size-sm;
    margin-right: 24px;
    color: $gray-6;

    &:last-child {
      margin-right: 0;
    }

    &--top {
      color: $orange-dark;
    }
  }
  .leave-message__message{ border-radius:5px;}
  .leave-message__nickname{
    img{ margin-left: 8px; }
  }
}
.red-box{
  width:62px; position:fixed; bottom:350px; right:26px; z-index:4;
  img{ width:62px; height: 80px;}
}
.live-room__swipe{
  width: 100%; height: 126px; background-color: #323333;
  img {
    height: 126px;
  }
}
.van-action-sheet{
  height: 50%;
}
.live-goods {
  .live-goods-title {
    width: 100%;
    position: fixed;
    height: 100px;
    line-height: 100px;
    text-align: center;
    background: #fff;
    border-radius: 24px 24px 0px 0px;
    z-index: 1000;
    overflow: hidden; 
    white-space: nowrap; 
    text-overflow: ellipsis;
    font-size: 32px;
    font-weight: 500;
    .close-icon {
      position: absolute;
      right: 30px;
      top: 30px;
      width: 32px;
      height: 32px;
      z-index: 10000;
    }
  }
  .van-list {
    padding-top: 100px;
  }
  .live-goods-li {
    img {
      width: 160px;
      height: 160px;
      padding-right: 20px;
    }
    .live-goods-name {
      width:500px;
      overflow: hidden; 
      white-space: nowrap; 
      text-overflow: ellipsis;
      font-size: 28px;
    }
    .live-goods-price {
      font-size: 24px;
      span {
        font-size: 36px;
      }
    }
    .cor-A00{
      color: #A00000;
    }
    .cor-32D1CB{
      color: #32D1CB;
    }
    .live-goods-pay {
      width: 132px;
      height: 48px;
      line-height: 48px;
      text-align: center;
      background: #DB1919;
      border-radius: 8px;
      color: #fff;
      font-size: 24px;
    }
    .live-goods-pay1 {
      width: 132px;
      height: 48px;
      line-height: 48px;
      text-align: center;
      background: linear-gradient(90deg, #47EB82 0%, #32D1CB 100%);
      border-radius: 8px;
      color: #fff;
      font-size: 24px;
    }
  }
}
.cor-999{
  color: #999;
}
</style>
